<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="/villiam/contactMe.png" />
    <title>Villiam</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        margin: 0;
        height: 100vh;
        background-color: #a8a8a1;
      }
      #app {
        min-height: 100%;
        /* background: url("./assets/desktop.jpeg") center / cover no-repeat; */
        position: relative;
      }
      .image_bg {
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* filter: url(#displacement-wave-filter); */
        object-fit: cover;
      }
      .home h1 {
        text-align: center;
        filter: contrast(30);
        /* background-color: #000; */
        text-align: center;
      }
      .home h1 span {
        font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
          sans-serif;
        letter-spacing: -40px;
        color: #000;
        animation: move-letter 4s linear forwards;
      }

      @keyframes move-letter {
        0% {
          opacity: 0;
          letter-spacing: -40px;
          filter: blur(10px);
        }
        25% {
          opacity: 1;
        }
        50% {
          filter: blur(5px);
        }
        100% {
          letter-spacing: 0px;
          filter: blur(1px);
        }
      }

      .home .menuList {
        width: 80%;
        height: 10px;
        overflow: hidden;
        margin: 0 auto;
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 8px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
      }

      .home .menuList:hover {
        height: auto;
        padding: 12px;
      }


      .home .menu-item {
        position: relative;
        display: inline-block;
        height: 140px;
        width: 140px;
        line-height: 140px;
        text-align: center;
        background: linear-gradient(45deg, #4c298c, #7e2c6f);
        border-radius: 50%;
        font-size: 13px;
        backdrop-filter: blur(2px);
        margin: 8px;
        transition: all 1.2s;
      }
      .menu-item:hover {
        transform: scale(1.2);
      }
      .home .menu-item::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        height: 80%;
        width: 80%;
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
      }
      .home .menu-item span {
        color: #fff;
        text-shadow: 2px 2px 5px #742a75;
        font-weight: 800;
        letter-spacing: 1px;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div id="app" class="home">
      <audio autoplay="" loop=""><source src="/assets/bg.mp3" /></audio>
      <!-- <img src="./assets/desktop.jpeg" class="image_bg" alt="" srcset="" /> -->
      <img src="http://api.btstu.cn/sjbz/?lx=meizi" class="image_bg" alt="" />
      <h1><span>Welcome to my web</span></h1>
      <div class="menuList" id="menuList"></div>
    </div>
  </body>
  <script src="./lib/vue.global.prod.js"></script>
  <script>
    const { createApp } = Vue;
    const routers = [
      {
        name: "音乐播放",
        href: "/musicPlay/index.html",
      },
      {
        name: "三国杀",
        href: "/sgsHero/index.html",
      },
      {
        name: "纪念日",
        href: "/lxy/index.html",
      },
      {
        name: "hi react",
        href: "/picture",
      },
      {
        name: "内嵌",
        href: "/iframe.html",
      },
      {
        name: "美图欣赏",
        href: "/picture/index.html",
      },
      {
        name: "OPEN IT",
        href: "/gift.html",
      },
      {
        name: "罗盘时钟",
        href: "/luopanClock/luopanClock.html",
      },
      {
        name: "生日计算",
        href: "/twelveYear.html",
      },
      {
        name: "villiam",
        href: "/villiam",
      },
      {
        name: "yang",
        href: "/yang",
      },
      {
        name: "vue",
        href: "/vue.html",
      },
      {
        name: "足球场",
        href: "field.html",
      },
      {
        name: "正在输入效果",
        href: "./cssDemo/typing.html",
      },
      {
        name: "addNameType",
        href: "/addNameType.html",
      },
      {
        name: "callBindApply",
        href: "/callBindApply.html",
      },
      {
        name: "classExtends",
        href: "/classExtends.html",
      },
      {
        name: "fireKey",
        href: "/fireKey.html",
      },
      {
        name: "lodashTest",
        href: "/lodashTest.html",
      },
      {
        name: "web1",
        href: "/web1.html",
      },
      {
        name: "web2",
        href: "/web2.html",
      },
    ];
    routers.forEach((item) => {
      const links = document.createElement("a");
      links.classList.add("menu-item");
      const link = document.createElement("span");
      links.href = item.href;
      link.innerText = item.name;
      links.appendChild(link);
      document.getElementById("menuList").appendChild(links);
    });
    createApp({
      data() {
        return {};
      },
    }).mount("#app");
  </script>
  <!-- <script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script> -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script src="./js/fashion.js"></script>
</html>
